<template>
	<view class="content">
		<u-search placeholder="请输入搜索" v-model="keyword" @custom="uSearch"></u-search>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="newProduct">
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(baseListItem, baseListIndex) in classifyData" :key="baseListIndex"  @click="click(baseListItem.id)">
					<view class="image-box"><image class="_imgs" :src="baseListItem.picUrl" mode=""></image></view>
					<view class="newProduct-text ">
						<text class="newProduct-title">{{ baseListItem.name }}</text>
						<view class="newProduct-price">{{ baseListItem.retailPrice }}元起</view>
					</view>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			keyword: '',
			classifyData: [],
			productList:[],
			list: ['综合', '价格', '分类'],
			curNow: 1
		};
	},
	onLoad(option) {
			console.log(option)
		this.$get(this.API.goodsList,{
			keyword:'',
			categoryId:option.id
		}).then((res)=>{
				console.log(res)
			
			this.classifyData=res.data.data.list
			this.productList=res.data.data.list
		})
	},
	methods: {
		uSearch(e){
			this.$get(this.API.goodsList,{
				keyword:e
			}).then((res)=>{
				this.classifyData=res.data.data.list
				this.productList=res.data.data.list	
			})
		},
		click(index){
			uni.navigateTo({
				url:'/pages/productDetails/productDetails?id='+index
			})
		},
		sectionChange(index) {
			this.curNow = index;
			if(index==0){
				this.classifyData=this.productList
			}else if(index==1){
				this.$get(this.API.goodsList,{
					keyword:this.keyword,
					sort:'retail_price',
					order:'asc',
				}).then((res)=>{
					this.classifyData=res.data.data.list
					
				})
			} else{
			
			}
			
			
		}
	}
};
</script>

<style lang="scss">
.content {
	.newProduct {
		margin: 55rpx;
		.image-box {
			height: 200rpx;
			._imgs {
				width: 200rpx;
				height: 190rpx;
			}
		}

		.newProduct-text {
			margin: 10px;
			.newProduct-title {
				width: 50vw;
				overflow: hidden;
				white-space: nowrap;
				font-size: 20rpx;
			}
			.newProduct-price {
				font-size: 20rpx;
				color: #f56723;
				text-align: center;
			}
		}
	}
}
</style>
